import "./header.scss"
import React from 'react'
import { NavBar } from 'antd-mobile'
import { useTitle } from "@/hooks/useTitle"
import { useLocation, useNavigate } from "react-router-dom"
import { useDispatch } from 'react-redux'
import { collapseSlice } from "@/store/modules/collapseSlice"
import { useSearchParams } from "react-router-dom"

function Header() {
    const [searchParams] = useSearchParams()
    const title = useTitle()
    const location = useLocation()
    const dispatch = useDispatch()
    const navigate = useNavigate()

    const rightHandler = () => {
        navigate("/record");
        dispatch(collapseSlice.actions.colse())
    }
    const rightHandler1 = () => {
        navigate(`/?name=${searchParams.get("name")}&money=${searchParams.get("money")}&telephone=${searchParams.get("telephone")}`);
        dispatch(collapseSlice.actions.colse())
    }
    const leftHandler = () => {
        dispatch(collapseSlice.actions.change())
    }

    const right = (
        location.pathname != "/record" ?
            (<i className="iconfont icon-dingdan" onClick={rightHandler}></i>) : <></>
    )
    const right1 = () => {
        if (location.pathname == "/record") {
            return (
                <></>
            )
        }
        else {
            if (location.pathname == "/goods") {
                return (
                    <span style={{ fontSize: ".426667rem" }} onClick={rightHandler1}>确定</span>
                )
            }
            else {
                return (
                    <i className="iconfont icon-dingdan" onClick={rightHandler}></i>
                )
            }
        }
    }
    const left = (
        <i className="iconfont icon-list-v2-full" onClick={leftHandler}></i>
        // <UnorderedListOutline />
    )

    return (
        <NavBar backArrow={left} right={right1()}>
            {title}
        </NavBar>
    )
}
export default Header